<template>
  <div>
    <HeaderTop :enable-shadow="true"/>
    <el-row class="al-m-top-20px">
      <el-col :span="2">
        <pre> </pre>
      </el-col>
      <el-col :span="14" class="">
        <!--发布作品-->
        <div>
          <AddWorks @sonData="receiveSonData"/>
        </div>

        <!--分割线-->
        <br>
        <el-divider content-position="center">
          <span class="al-title-h3">看看其他用户的作品~</span>
        </el-divider>

        <!--显示作品-->
        <div class="">
          <div class="al-box-shadow-radius al-m-top-20px al-p-10px"
               v-for="(item, index) in allWorks.list" :key="index">
            <!--显示作品信息-->
            <div class="al-cursor-pointer"
                 @click="goPage('/works/detail/' + item.id)">
              <AvatarNickname

                      :avatar="item.tuser.avatar"
                      :nickname="item.tuser.nickname"
                      :desc="item.tuser.identity"
              />
              <el-divider class="al-m-top--20px"></el-divider>
              <div class="item_info">
                <div>
                  {{item.introduction}}
                </div>

                <div class=" al-m-top-20px">
                  <DisplayGridImage :data-source="item.images"/>
                  <!--                                <el-image v-for="(img, index_img) in item.images" :src="img" />-->
                </div>

              </div>
            </div>
          </div>
        </div>

        <!--分页-->
        <div>
          <el-row class="al-m-top-20px al-m-bottom-20px">
            <el-col :span="4">
              <pre> </pre>
            </el-col>
            <el-col :span="16">
              <el-pagination
                      background
                      :page-size="allWorks.pageSize"
                      @current-change="handlePageChange"
                      @next-click="getAllWorks(allWorks.nextPage, 3)"
                      @prev-click="getAllWorks(allWorks.prePage, 3)"
                      layout="prev, pager, next"
                      :total="allWorks.total">
              </el-pagination>
            </el-col>
            <el-col :span="4">
              <pre> </pre>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6" class="al-m-left-20px">
        <!--标题节点-->
        <TitleNode title-text="摄影师 | 模特 推荐"/>
        <br>

        <!--侧边栏-->
        <SideBar :data-source1="photographerRecommend"
                 :data-source2="modelRecommend"
        />
      </el-col>
      <el-col :span="2">
        <pre> </pre>
      </el-col>
    </el-row>


    <ALFooter/>

  </div>
</template>

<script>
  import {request} from "../../util/network/request";
  import HeaderTop from "@/components/public/HeaderTop";
  import AvatarNickname from "@/components/public/AvatarNickname";
  import SideBar from "@/pages/works/component/SideBar";
  import {USER_GET_ALL_COMMON} from "@/util/network/api/user/api-user";
  import {WORKS_GET_ALL_USER_PAGINATION} from "@/util/network/api/works/api-works";
  import DisplayGridImage from "@/components/public/DisplayGridImage";
  import TitleNode from "@/components/public/TitleNode";
  import ALFooter from "../../components/public/ALFooter";
  import AddWorks from "./component/AddWorks";

  export default {
    data() {
      return {

        allWorks: {},
        currentDate: new Date(),
        photographerRecommend: [],
        modelRecommend: []
      }
    },
    mounted() {
      this.getAllWorks();

      //摄影师推荐
      this.getUserRecommend(1);
      //模特推荐
      this.getUserRecommend(2);


    },

    components: {
        AddWorks,
      ALFooter,
      TitleNode,
      DisplayGridImage,
      SideBar,
      AvatarNickname,
      HeaderTop
    },
    methods: {
      goPage(path) {
        this.gotoPage(path);
      },

      //获取所有用户动态
      getAllWorks(pageNum = 1, pageSize = 3) {
        request({
          method: 'get',
          url: WORKS_GET_ALL_USER_PAGINATION + `?pageNum=${pageNum}&pageSize=${pageSize}`,
        }).then(res => {
          // console.log("================所有作品数据");
          this.allWorks = res.data.data;
          // console.log(this.allWorks);
        }).catch(err => {
          console.log(err);
        })
      },

      getUserRecommend(identity, pageNum = 1, pageSize = 0) {

        request({
          url: USER_GET_ALL_COMMON + identity + `?pageNum=${pageNum}&pageSize=${pageSize}`
        }).then(res => {
          if (identity === 1) {
            // console.log("==============摄影师用户信息");
            // console.log(res);
            this.photographerRecommend = res.data.data.list;
          } else if (identity === 2) {
            // console.log("==============模特用户信息");
            // console.log(res);
            this.modelRecommend = res.data.data.list;
          }
        }).catch(err => {
          console.log(err)
        });
      },

      //接收子组件的消息
      receiveSonData(data){
        this.getAllWorks();
      },

      //分页页号监听事件
      handlePageChange(pageNum) {
        console.log(pageNum);
        this.getAllWorks(pageNum, 3);
      },


    },

    watch: {

    }

  }
</script>

<style>

</style>
